<template>
  <div id="app">
    <div class="box">
      <div>
        <el-select style="width:200px;"  v-model="search.leveId" filterable  placeholder="角色分类筛选">
          <el-option  key="" label="-- 角色分类筛选 --" value="">
          </el-option>
          <el-option v-for="item in roleLeveList" :key="item.id" :label="item.roleTypeName" :value="item.id">
          </el-option>
        </el-select>
        <el-input class="l-margin-l15" style="width:200px;" v-model="search.keyWords" placeholder="关键字搜索"></el-input>
        <el-button type="primary" class="l-margin-l15" v-on:click="onSeach">搜索</el-button>

      </div>
    </div>
    <div class="box">
      <el-table :data="list" :height="250" border style="width: 100%" :highlight-current-row="true">

        <el-table-column label="所属分类" align="center">
          <template slot-scope="scope">
            {{ scope.row.roleConfirmName }}
          </template>
        </el-table-column>
        <el-table-column label="角色" align="center">
          <template slot-scope="scope">
            {{ scope.row.roleName }}
          </template>
        </el-table-column>
        <el-table-column label="角色代码" align="center">
          <template slot-scope="scope">
            {{ scope.row.roleCode }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="onSelectRow(scope.row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="height: 20px">&nbsp;</div>
    <div class="lpage">
      <el-pagination v-on:size-change="handleSizeChange" v-on:current-change="handleCurrentChange" v-bind:current-page="currentPage" v-bind:page-sizes="[5, 20, 30, 40]" v-bind:page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" v-if="reflushPageFlag" v-bind:total="total">
      </el-pagination>
    </div>

  </div>
</template>
  
  <script>
var loading;
import { requestPost } from "@/service/requestL";
export default {
  props: {
    gid: {
      type: String,
      default:"",
    },
  },
  data() {
    return {
      userPower: "",
      search: {
        keyWords: "",
        leveId:"",
      },
      //分页 开始
      currentPage: 1,
      pagesize: 5,
      total: 0,
      reflushPageFlag: true,
      list: [],
      roleLeveList:[],//层级列表
    };
  },
  created() {
    this.InitData();
  },
  watch: {
    gid: {
      handler(a, b) {

        this.InitData();
      }
    }
  },
  methods: {
    //初始化
    InitData() {
      this.search.keyWords="";
        this.getRoleLeveList();
      this.getList();
    },


      //获角色层级列表
      getRoleLeveList() {
      
      this.roleLeveList = [];
      var that = this;

      requestPost({
        url: "api/sq/GetRoleConfirmList",
        data: {},
      })
        .then((res) => {
          if (res.data != undefined) {
            that.roleLeveList = res.data;
          }
        })
        .catch((err) => {
          //this.$message.error("数据请求异常");
        });
    },

    //搜索
    onSeach() {
      this.currentPage = 1;
      this.getList();
    },
    //查询列表
    getList() {
        
      this.openLoading();
      this.list = [];
      var that = this;

      let jsondata = {
        PageIndex: this.currentPage,
        PageSize: this.pagesize,
        keyWords: this.search.keyWords,
        RoleType:this.search.leveId,
        isAreaRole:"",
        isSelect:1
      };
      requestPost({
        url: "api/sq/GetCommonRoleList",
        data: jsondata,
      })
        .then((res) => {
          if (res.data != undefined) {
            that.list = res.data.list;
            that.total = res.data.total;

            that.$nextTick(function () {
              that.reflushPageFlag = true;
            });
          }
          that.closeLoading();
        })
        .catch((err) => {
          this.$message.error("数据请求异常");
          that.closeLoading();
        });
    },
    //选择当前行
    onSelectRow(row) {
      
      this.$emit("onSelectRow", row);
    },
    //当前条
    handleSizeChange(val) {
      this.pagesize = val;
      this.getList();
    },
    //当前页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getList();
    },
    //遮罩层 开启
    openLoading() {
      loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    //遮罩层 关闭
    closeLoading() {
      loading.close();
    },
  },
};
</script>
  
  <style scoped>
.l-roleLisst {
  padding: 0px 30px;
}

.l-input {
  display: inline-block;
  width: 260px;
}

.l-input-form {
  display: inline-block;
  width: 220px;
}

.l-margin-l15 {
  margin-left: 15px;
}

.l-red {
  color: red;
}
</style>